<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <div v-html="ceshihtml"></div>
    <!-- <remoteCdn :cdn="'http://api.map.baidu.com/api?v=2.0&ak=fWMwjrsRzdlVCFSlC92Zyivwkjj6KHLW&callback=onBMapCallback'"></remoteCdn>  -->
    <!-- <remoteCdn :cdn="'http://mapv.baidu.com/build/mapv.min.js'"></remoteCdn>  -->
    <div id="map" style="width:800px;height:800px;"></div>
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
// import mapv from 'mapv'
import remoteCdn from './remoteCdn'
import loadBMap from './map.js'
// import * as mapv from 'mapv'

export default {
  name: 'Home',
  data() {
    return {
      ceshihtml:`<div data-role="outer" label="Powered by 135editor.com"><div class="">&nbsp;<audio src="https://vod.cm.jstv.com/video/2021/8/5/2021851628135686938_218.mp3" poster="undefined" undefined="" controls="controls" author="汤非" name="好人">您的浏览器不支持audio播放</audio>&nbsp;</div><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/4806cfaef5252e1b95c728934187e0f3.jpg" alt=""></p><p><br></p><p style="text-align: center;"><span><b>好人</b></span></p><p style="text-align: center;"><span><b><br></b></span></p><p style="text-align: center;">词：陈涛</p><p style="text-align: center;">曲：王备</p><p style="text-align: center;">演唱：汤非</p><p style="text-align: center;">千里之外的我的爱</p><p style="text-align: center;">有没有让你舒怀</p><p style="text-align: center;">愿我的心意祝福中远去</p><p style="text-align: center;">拥抱着你风里雨里温暖在一起</p><p style="text-align: center;">多在身边多见一面</p><p style="text-align: center;">多一句肺腑之言</p><p style="text-align: center;">相似的旅途不同的风景</p><p style="text-align: center;">某时某刻你会记得你从不孤单</p><p style="text-align: center;">做好人得心安</p><p style="text-align: center;">我们呼吸在同一片天</p><p style="text-align: center;">如果苦痛终究难免</p><p style="text-align: center;">让我们彼此伸手相搀</p><p style="text-align: center;">做好人得心安</p><p style="text-align: center;">有幸生活在同日同年</p><p style="text-align: center;">慷慨人生快乐奉献</p><p style="text-align: center;">美好的日子既是今天更是明天</p><p><br></p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/6b297baaba81b89b68fe87712fa3de66.jpg" alt=""><p><br></p><p><b>汤非</b></p><p>江都籍青年歌唱家，扬州慈善形象大使，扬州市十大杰出青年</p><p>第十五届CCTV全国青年歌手电视大奖赛流行唱法银奖</p><p>第三届亚洲青年歌唱家大赛流行唱法第一名</p><p>演唱作品多次荣获中宣部“五个一工程”奖</p><p>连续多年参加央视春节联欢晚会及国家重大文艺演出任务等</p><p><br></p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/55a9db227ce4d797fc20a009d33a10db.jpg" alt=""><p><br></p><p><span>8月3日，江都区文体旅局接到全区开展全员核酸检测任务后，立即组织工作人员投入到江都区第一次全员核酸检测的战役中。共选派62名志愿者参与仙女镇引江社区核酸检测点，主要负责提供现场咨询、维持现场秩序、收录采样码、排查健康码及行程码等方面工作。</span></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/a5c270212ae739522911f3df07c7fee7.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/6e16885b9254ee56edab73b55ddd3a69.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/9760edf5890ab976062aff65d9453014.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/bfa796155d487303a6a23a902c1f7f5b.jpg" alt=""></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/1c1f1ac2bfb2e3a9fe87a2a1f1099e4c.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/fb85a6e1d6140f3b105b2b42dfd6d468.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/987666453306cd116cb03e8626574227.jpg" alt=""><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/8eea77a82336f377c3938bebd8d1b32c.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/8eba482d0adf3bd0c2c15f0ba667daac.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/3cf7aabd6b94aba8b31cc9793f64fdff.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/afac85c27846773303418ea0ff0e7e7a.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/d90a89daf4da9bf63f70aef4e0221ac9.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/b098e035a45eee5e29da667e61f7e8fa.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/bd954d3ab95cafdd8bb561ec9b10f415.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/ed3de322cf3f890e650e1baa59c019c1.jpg" alt=""></p><p><br></p><p>从下午一点直至凌晨一点，志愿者们共计协助8000余名群众完成核酸检测采样工作。</p><p><br></p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/c3bf92ff9e151e410e8c9cd0c4a5484e.jpg" alt=""><p><br></p><p>8月4日，选派36名文体旅志愿者协助仙女镇樊庄社区做好防疫宣传、建立业主抗疫微信群的相关工作。</p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/34d425bac1108ae81cf168ac8b4b0ce2.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/a59c9fff7df11e55c7ab3ff735535c9d.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/35b5720bbbbf76406dd6e483f8aacb71.jpg" alt=""></p><p><br></p><p><img src="https://jd-appimg.spacecig.com/imgupload/News/2021-08-05/05d5e379ec40d358f83f5d13f62d8c00.jpg" alt=""></p><p>&nbsp; &nbsp;&nbsp;</p><p><br></p><p>从最初防疫宣传、疫情入户排查到核酸检测现场，在抗疫一线，江都文体旅人的身影从未缺席，全力投入各项抗疫志愿服务。众志成城，江都加油！</p><p><br></p><p><br></p><p>来源：江都区文化馆</p><p>编辑：梁燕</p><p><br></p></div>`,
      mapId: 'BMap-' + parseInt(Date.now() + Math.random()),
      mapv:null
    }
  },
  components: {
    HelloWorld,
    remoteCdn
  },
  mounted() {
    this.initMap()
    // this.loadMap()
    console.log(this.tobg(this.ceshihtml))
  },
  methods: {
    toAudioBg(str){
      return str.replace(/<audio.*?(poster="undefined")/g,function(all,pos){
        return pos.replace(/undefined/,this.audioimgurl)
      })
    },
    initMap() {
      loadBMap('fWMwjrsRzdlVCFSlC92Zyivwkjj6KHLW')
        .then(() => {
            this.mapv = require('./mapv')
            this.loadMap()
        })
        .catch(err => {
          console.log('地图加载失败')
        })
    },
    loadMap() {
      console.log(this.mapv)
      var map = new BMap.Map('map', {
        enableMapClick: false
      }) // 创建Map实例
      map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5) // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放

      map.setMapStyle({
        style: 'midnight'
      })

      var randomCount = 1000

      var data = []

      var citys = [
        '北京',
        '天津',
        '上海',
        '重庆',
        '石家庄',
        '太原',
        '呼和浩特',
        '哈尔滨',
        '长春',
        '沈阳',
        '济南',
        '南京',
        '合肥',
        '杭州',
        '南昌',
        '福州',
        '郑州',
        '武汉',
        '长沙',
        '广州',
        '南宁',
        '西安',
        '银川',
        '兰州',
        '西宁',
        '乌鲁木齐',
        '成都',
        '贵阳',
        '昆明',
        '拉萨',
        '海口'
      ]

      // 构造数据
      while (randomCount--) {
        var cityCenter = this.mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)])
        data.push({
          geometry: {
            type: 'Point',
            coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
          },
          count: 30 * Math.random(),
          time: 100 * Math.random()
        })
      }

      var dataSet = new this.mapv.DataSet(data)

      var options = {
        fillStyle: 'rgba(55, 50, 250, 0.2)',
        globalCompositeOperation: 'lighter',
        size: 15,
        animation: {
          type: 'time',
          stepsRange: {
            start: 0,
            end: 100
          },
          trails: 10,
          duration: 5
        },
        draw: 'simple'
      }

      var mapvLayer = new this.mapv.baiduMapLayer(map, dataSet, options)
    }
  }
}
</script>
